<template>
  <div class="position">
    <div class="position_top">
      <van-nav-bar class="psnum" title="在招职位">
        <template slot="left"><van-icon name="down" @click="left" /> </template>
        <template slot="title"
          ><span>
            在招职位 <span class="station">{{ station }}</span></span
          ></template
        ></van-nav-bar
      >
      <div class="position_btm">
        <div class="content">
          <span
            v-for="(item, index) in list"
            :key="index"
            :class="{ active: active == item.name }"
            class="post_gw"
            @click="mark(item, index)"
          >
            {{ item.name }}</span
          >
        </div>
      </div>
      <van-dropdown-menu>
        <van-dropdown-item
          title="城市"
          v-model="value1"
          :options="option1"
          @change="opone"
        />
        <van-dropdown-item
          title="经验"
          v-model="value2"
          :options="option2"
          @change="optwo"
        />
        <van-dropdown-item
          title="待遇"
          v-model="value3"
          :options="option3"
          @change="opthreen"
        />
      </van-dropdown-menu>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      style="margin-top : 149px"
    >
      <positionItem
        :item="item"
        v-for="(item, index) in postlist"
        :key="index"
        :tiid="id"
      />
    </van-list>
  </div>
</template>

<script>
import { positionFilters, companyPositions } from '@/api/api.js'
const positionItem = () => import('./positionItem')
export default {
  data () {
    return {
      id: this.$route.params.id,
      loading: false,
      finished: false,
      value1: 0,
      value2: 0,
      value3: 0,
      station: 0,
      active: '全部',
      list: [{ name: '全部' }],
      option1: [{ text: '全部', value: 0 }],
      option2: [{ text: '全部', value: 0 }],
      option3: [{ text: '全部', value: 0 }],
      postlist: [],
      quanbu: {
        id: this.$route.params.id,
        limit: 999999999,
        type: undefined,
        city: undefined,
        salary: undefined,
        experience: undefined
      }
    }
  },
  methods: {
    mark (item, index) {
      if (index === 0) {
        this.quanbu.type = undefined
        this.postlist = []
        this.loading = false
        this.finished = false
        this.active = item.name
      } else {
        this.list[0].name = '全部'
        this.quanbu.type = item.name
        this.postlist = []
        this.loading = false
        this.finished = false
        this.active = item.name
      }
    },

    async onLoad () {
      // 得到所有职位
      this.arrdrr()
    },
    left () {
      this.$router.go(-1)
    },
    // 的到筛选信息在招职位
    async positionFilters () {
      const res = await positionFilters(this.id)
      res.data.cityFilters.forEach((item, index) => {
        this.option1.push({ text: item, value: index + 1 })
      })
      res.data.experienceFilters.forEach((item, index) => {
        this.option2.push({ text: item, value: index + 1 })
      })
      res.data.salaryFilters.forEach((item, index) => {
        this.option3.push({ text: item, value: index + 1 })
      })
      res.data.types.forEach((item, index) => {
        this.list.push({ name: item, value: index + 1 })
      })
    },
    // onloofjoa
    async arrdrr () {
      const res = await companyPositions(this.quanbu)
      this.postlist = [...this.postlist, ...res.data.list]
      this.station = res.data.total
      this.loading = false
      // 判断是否完结
      if (this.postlist.length >= res.data.total) {
        this.finished = true
      }
    },
    opone () {
      if (this.value1 === 0) {
        this.quanbu.city = undefined
        this.postlist = []
        this.loading = false
        this.finished = false
      } else {
        this.quanbu.city = this.option1[this.value1].text
      }
      this.postlist = []
      this.loading = false
      this.finished = false
    },
    optwo () {
      if (this.value2 === 0) {
        this.quanbu.experience = undefined
        this.postlist = []
        this.loading = false
        this.finished = false
      } else {
        this.quanbu.experience = this.option2[this.value2].texts
      }
      this.postlist = []
      this.loading = false
      this.finished = false
    },
    opthreen () {
      if (this.value3 === 0) {
        this.quanbu.salary = undefined
        this.postlist = []
        this.loading = false
        this.finished = false
      } else {
        this.quanbu.salary = this.option3[this.value3].text
      }
      this.postlist = []
      this.loading = false
      this.finished = false
    }
  },
  components: { positionItem },
  created () {
    this.positionFilters()
  }
}
</script>

<style lang="less">
.position_top {
  background-color: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
}
.position {
  .psnum {
    span {
      position: relative;
      padding: 22px;
      font-size: 15px;
    }
    .station {
      position: absolute;
      right: -14px;
      top: -6px;
      font-size: 12px;
    }
  }
  .van-nav-bar__left {
    .van-icon-down::before {
      transform: rotate(90deg);
      color: black;
      font-size: 20px;
    }
  }
  .position_btm {
    padding: 10px;
  }
  .content::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
  .content {
    display: flex;
    width: 100%;
    overflow-x: scroll;
    padding-bottom: 10px;
    .post_gw {
      font-size: 12px;
      background-color: #f7f4f5;
      padding: 6px 12px;
      border-radius: 1000px;
      flex-shrink: 0;
      margin-right: 0.26667rem;
      color: #545671;
    }
    .active {
      background: #00b8d4;
      color: #fff;
    }
  }
}
</style>
